<!DOCTYPE html>
<!--suppress ALL -->
<html>
<style>
    #user {
        position: absolute;
        left: 8%;
        top: 30%;
        color: #969696;
    }

    #pass1 {
        position: absolute;
        left: 8%;
        top: 30%;
        color: #969696;
    }

    #pass2 {
        position: absolute;
        left: 8%;
        top: 30%;
        color: #969696;
    }

    #eye1 {
        font-size: 20px;
        position: absolute;
        left: 8%;
        top: 30%;
        color: #281a15;
    }

    #eye2 {
        font-size: 20px;
        position: absolute;
        left: 8%;
        top: 30%;
        color: #281a15;
    }

    #mail {
        position: absolute;
        left: 8%;
        top: 30%;
        color: #969696;
    }

    .glyphicon.glyphicon-ok {
        font-size: 20px;
        position: absolute;
        left: 8%;
        top: 30%;
        color: #96b97d;
    }

    .glyphicon.glyphicon-remove {
        font-size: 20px;
        position: absolute;
        left: 8%;
        top: 30%;
        color: red;
    }

    #map {
        height: 100%;
        width: 100%;
        position: absolute;
        top: 0px;
        bottom: 0px;
        z-index: 0;
        overflow: hidden;
        word-break: break-all;
        background-color: #f1f1f1;
    }

    .center-block {
        position: relative;
        top: 40%;
        margin: 50px;
        transform: translateY(-50%);
        width: 350px;
        height: 500px;
        background-color: #FFFFFF;
        box-shadow: darkgrey 0px 0px 5px 2px;
    }

    hr.style13 {
        height: 10px;
        width: 350px;
        border: 1px;
        color: black;
        box-shadow: 0 10px 10px -10px #8c8b8b inset;
    }

    .style8 {
        color: black;
        padding: 0 5px 0;
        margin: 5px 0;
        line-height: 1px;
        left: 57px;
        border-left: 80px solid black;
        border-right: 80px solid black;
        text-align: center;
    }

    @font-face {
        font-family: 'iconfont';  /* project id 855660 */
        src: url('//at.alicdn.com/t/font_855660_6t9ap5qz85j.eot');
        src: url('//at.alicdn.com/t/font_855660_6t9ap5qz85j.eot?#iefix') format('embedded-opentype'),
        url('//at.alicdn.com/t/font_855660_6t9ap5qz85j.woff') format('woff'),
        url('//at.alicdn.com/t/font_855660_6t9ap5qz85j.ttf') format('truetype'),
        url('//at.alicdn.com/t/font_855660_6t9ap5qz85j.svg#iconfont') format('svg');
    }

    #iconfont1 {
        font-family: "iconfont" !important;
        font-size: 23px;
        font-style: normal;
        -webkit-font-smoothing: antialiased;
        -webkit-text-stroke-width: 0.2px;
        -moz-osx-font-smoothing: grayscale;
        color: #e05244;
    }

    @font-face {
        font-family: 'iconfont';  /* project id 855658 */
        src: url('//at.alicdn.com/t/font_855658_6enjl45ttj9.eot');
        src: url('//at.alicdn.com/t/font_855658_6enjl45ttj9.eot?#iefix') format('embedded-opentype'),
        url('//at.alicdn.com/t/font_855658_6enjl45ttj9.woff') format('woff'),
        url('//at.alicdn.com/t/font_855658_6enjl45ttj9.ttf') format('truetype'),
        url('//at.alicdn.com/t/font_855658_6enjl45ttj9.svg#iconfont') format('svg');
    }

    #iconfont2 {
        font-family: "iconfont" !important;
        font-size: 25px;
        font-style: normal;
        -webkit-font-smoothing: antialiased;
        -webkit-text-stroke-width: 0.2px;
        -moz-osx-font-smoothing: grayscale;
        color: #00bb29;
    }

    @font-face {
        font-family: 'iconfont';  /* project id 855662 */
        src: url('//at.alicdn.com/t/font_855662_k0hvnhd1crk.eot');
        src: url('//at.alicdn.com/t/font_855662_k0hvnhd1crk.eot?#iefix') format('embedded-opentype'),
        url('//at.alicdn.com/t/font_855662_k0hvnhd1crk.woff') format('woff'),
        url('//at.alicdn.com/t/font_855662_k0hvnhd1crk.ttf') format('truetype'),
        url('//at.alicdn.com/t/font_855662_k0hvnhd1crk.svg#iconfont') format('svg');
    }

    #iconfont3 {
        font-family: "iconfont" !important;
        font-size: 23px;
        font-style: normal;
        -webkit-font-smoothing: antialiased;
        -webkit-text-stroke-width: 0.2px;
        -moz-osx-font-smoothing: grayscale;
        color: #498ad5;
    }

    a.two:link {
        text-decoration: none;
    }

    /* unvisited link */
    a.two:visited {
        text-decoration: none;
    }

    /* visited link */
    a.two:hover {
        text-decoration: none;
    }

    /* mouse over link */
    a.two:active {
        text-decoration: none;
    }

    /* selected link */
    a.one:link {
        text-decoration: none;
    }

    /* unvisited link */
    a.one:visited {
        text-decoration: none;
    }

    /* visited link */
    a.one:hover {
        text-decoration: none;
    }

    /* mouse over link */
    a.one:active {
        text-decoration: none;
    }

    /* selected link */
</style>
<head>
    <title>注册 - 风流</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0 " charset="utf-8">
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <!--<link rel="shortcut icon" href="fengliu.ico"/>-->
    <script>
        var username;
        var password;
        var mailnumber;
        var judge1 = 0, judge2 = 0, judge3 = 0;
        var t = 4;

        $(function () {

            $("#login").click(function () {
                document.location.href = 'https://lhy1999.gitee.io/project_page/index.html';
            });

            $("#eye1").click(function () {
                state = $("#eye1").attr("state");
                if (state == "false") {
                    $("#eye1").attr("state", "true");
                    $("#eye1").css("color", "#969696");
                    $("#passwordFirst").attr("type", "text");
                } else {
                    $("#eye1").attr("state", "false");
                    $("#eye1").css("color", "#281a15");
                    $("#passwordFirst").attr("type", "password");
                }
            });

            $("#eye2").click(function () {
                state = $("#eye2").attr("state");
                if (state == "false") {
                    $("#eye2").attr("state", "true");
                    $("#eye2").css("color", "#969696");
                    $("#passwordTwice").attr("type", "text");
                } else {
                    $("#eye2").attr("state", "false");
                    $("#eye2").css("color", "#281a15");
                    $("#passwordTwice").attr("type", "password");
                }
            });
        });

        function showTime() {
            t = t - 1;
            var option = 1;
            $("#timeLeft").text('恭喜您注册成功，自动登录，还剩'+t+'秒');
            $("#timeLeft").css("visibility", "visible");
            if (t == 0) {
                document.location.href = 'https://lhy1999.gitee.io/project_page/success.html?' + username + '=' + password;
                return 1;
            }    //每秒执行一次,showTime()
            setTimeout("showTime()", 1000);
        }

        function usernameCheck() {
            var names = $("#username").val();
            var judge = localStorage.getItem(names);
            if (judge == null) {
                judge1 = 1;
                $("#UserRight").css("visibility", "visible");
                $("#UserWrong").css("visibility", "hidden");
                username = names;
                $("#wrongInfo").text("");
                return 1;
            } else {
                judge1 = 0;
                $("#UserWrong").css("visibility", "visible");
                $("#UserRight").css("visibility", "hidden");
                $("#wrongInfo").text("用户名已注册");
                return 0;
            }
        }

        function passwordCheck() {
            var passRe = /^(?=.{7,})(((?=.*[A-Z])(?=.*[a-z]))|((?=.*[A-Z])(?=.*[0-9]))|((?=.*[a-z])(?=.*[0-9]))).*$/g;
            var passwordFirst = $("#passwordFirst").val();
            var passwordTwice = $("#passwordTwice").val();
            if (passwordFirst == passwordTwice) {
                if (passRe.test(passwordFirst)) {
                    judge2 = 1;
                    $("#passwordRight").css("visibility", "visible");
                    $("#passwordWrong").css("visibility", "hidden");
                    password = passwordFirst;
                    return 1;
                } else {
                    judge2 = 0;
                    $("#passwordWrong").css("visibility", "visible");
                    $("#passwordRight").css("visibility", "hidden");
                    $("#wrongInfo").text("密码过于简单");
                    return 0;
                }

            } else {
                judge2 = 0;
                $("#passwordWrong").css("visibility", "visible");
                $("#passwordRight").css("visibility", "hidden");
                $("#wrongInfo").text("两次密码输入不一致");
                return 0;
            }
        }

        function mailCheck() {
            mailnumber = document.getElementById("mailnumber");
            var mailRe = /(\w)*(\d)*@(\w)*(\d)*(.)(\w)*(\d)*/g;
            if (mailRe.test(mailnumber.value)) {
                judge3 = 1;
                $("#mailRight").css("visibility", "visible");
                $("#mailWrong").css("visibility", "hidden");
                $("#wrongInfo").text("");
                return 1;
            } else {
                judge3 = 0;
                $("#mailWrong").css("visibility", "visible");
                $("#mailRight").css("visibility", "hidden");
                $("#wrongInfo").text("邮箱格式不正确");
                return 0;
            }
        }

        function saving() {
            if (check()) {
                var id = username;
                var userpass = password;
                var time = Date();
                var datas = {
                    "name": id,
                    "password": userpass,
                    "mail": mailnumber.value,
                    "registerTime": time,
                    "loginTime": time,
                    "logTimes": 0
                };
                localStorage.setItem(username, JSON.stringify(datas));
                $("#changeWhenLogIn").remove();
                return showTime();
            } else {
                return false;
            }
        }

        function check() {
            var a = usernameCheck();
            var b = passwordCheck();
            var c = mailCheck();
            d = a + b + c;
            if (usernameCheck() && passwordCheck() && mailCheck()) {
                return true;
            } else {
                return false;
            }
        }
    </script>
    <!-- 引入 Bootstrap -->
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="/lib/font-awesome/css/font-awesome.min.css">
    <!-- HTML5 Shiv 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 -->
    <!-- 注意： 如果通过 file://  引入 Respond.js 文件，则该文件无法起效果 -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->
</head>
<body>
<div id="map">
    <div class="center-block">
        <form class="form-horizontal" id="form" role="form">
            <p id="timeLeft" style=" position:absolute; left: 12%; top:50%; font-size: 15px; visibility: hidden">
                恭喜您注册成功，自动登录，还剩3秒。</p>
            <h1 class="text-center" id="haveATry"
                style="font-family: 华文行楷,serif;color:#0084ff;font-size:60px;position: absolute;top: 10px;left: 15%; ">
                信通风流</h1>
            <hr class="style13" style="position: absolute;top: 20%;">
            <a class="one" id="login"
               style=" position:absolute; top: 27%; left: 28%; font-family:  -apple-system;font-size: 18px;color: #969696;font-weight: 700;">登录</a>
            <b style="position:absolute; left: 45%; top: 25%; color: #ea6f5a;font-size: 18px;font-weight: 800;padding: 10px;">·</b>
            <a class="two"
               style="position:absolute; top: 27%; left: 60%; font-family:  -apple-system;font-size: 18px;color: #ea6f5a;border-bottom: 2px solid;font-weight: 700;">注册</a>
            <div id="changeWhenLogIn">
                <div class="form-group" id="input1">
                    <div class="col-md-10 " style=" position: absolute; top: 170px;left: 30px;border-radius: 0; ">
                        <input type="text" required="required" onchange="usernameCheck()" class="form-control" id="username"
                               placeholder="用户名"
                               style="text-indent:12px;width: 250px;height: 35px;margin-bottom: 0;background-color: #f1f1f1; border-radius: 0;border-bottom: 0;box-shadow: inset -1px 1px 0 0 darkgrey ,inset 1px 0 0 0 darkgrey;">
                        <span class="glyphicon glyphicon-user" id="user"></span>
                    </div>
                    <span class="glyphicon glyphicon-ok" id="UserRight"
                          style="position: absolute; top: 35%; left: 85%; visibility: hidden;"></span>
                    <span class="glyphicon glyphicon-remove" id="UserWrong"
                          style="position: absolute; top: 35%; left: 85%; visibility: hidden;"></span>
                </div>
                <div class="form-group" id="input2">
                    <div class="col-md-10 " style=" position: absolute; top: 205px;left: 30px;border-radius: 0;">
                        <input type="password" required="required" onchange="passwordCheck()" class="form-control"
                               id="passwordFirst" placeholder="密码"
                               style="text-indent:12px;width: 250px;height: 35px;margin-bottom: 0;background-color: #f1f1f1; border-radius: 0;border-bottom: 0; box-shadow: inset -1px 0 0 0 darkgrey,inset 1px 0 0 0 darkgrey; ">
                        <span class="glyphicon glyphicon-pencil" id="pass1"></span>
                        <span class="glyphicon glyphicon-eye-open" state="false" id="eye1"
                              style=" position: absolute; left: 80%;"></span>
                    </div>
                </div>
                <div class="form-group" id="input3">
                    <div class="col-md-10 " style=" position: absolute; top: 240px;left: 30px;border-radius: 0; ">
                        <input type="password" required="required" onchange="passwordCheck()" class="form-control"
                               id="passwordTwice" placeholder="确认密码"
                               style="text-indent:12px;width: 250px;height: 35px;margin-bottom: 0;background-color: #f1f1f1; border-bottom: 0; border-radius: 0;box-shadow:inset -1px 0 0 0 darkgrey,inset 1px 0 0 0 darkgrey ;">
                        <span class="glyphicon glyphicon-pencil" id="pass2"></span>
                        <span class="glyphicon glyphicon-eye-open" state="false" id="eye2"
                              style=" position: absolute;left: 80%;"></span>
                    </div>
                    <span class="glyphicon glyphicon-ok" id="passwordRight"
                          style="position: absolute; top: 49%; left: 85%; visibility: hidden;"></span>
                    <span class="glyphicon glyphicon-remove" id="passwordWrong"
                          style="position: absolute; top: 49%; left: 85%; visibility: hidden;"></span>
                </div>
                <div class="form-group" id="input4">
                    <div class="col-md-10 " style=" position: absolute; top: 275px;left: 30px;border-radius: 0; ">
                        <input type="text" required="required" onchange="mailCheck()" class="form-control" id="mailnumber"
                               placeholder="邮箱"
                               style="text-indent:12px;width: 250px;height: 35px;margin-bottom: 0;background-color: #f1f1f1; border-radius: 0;;box-shadow: inset -1px 0 0 0 darkgrey ,inset 1px 0 0 0 darkgrey,inset 0 -1px 0 0 darkgrey;">
                        <span class="glyphicon glyphicon-envelope" id="mail"></span>
                    </div>
                    <span class="glyphicon glyphicon-ok" id="mailRight"
                          style="position: absolute; top: 56%; left: 85%; visibility: hidden;"></span>
                    <span class="glyphicon glyphicon-remove" id="mailWrong"
                          style="position: absolute; top: 56%; left: 85%; visibility: hidden;"></span>
                </div>
                <div class="form-group" id="show5">
                    <div class="btt">
                        <button type="submit" class="btn btn-default" onclick="saving()"
                                style=" font-size: 16px;font-weight: 500; width:250px; position: absolute; left: 13%;top: 67%;border-top-right-radius: 25px; border-top-left-radius: 25px;border-bottom-left-radius: 25px;border-bottom-right-radius: 25px;color: #FFFFFF;background-color: #3db922;">
                            注 册
                        </button>
                    </div>
                </div>
                <p id="wrongInfo" style="position: absolute;top: 63%;left: 15%;color: red;"></p>
                <p class="text-center" id="show6"
                   style=";font-size: 12px;position: absolute;top: 75%; left: 24%; font-family: 楷体,serif;color:#969696;line-height: 20px;">
                    “注册” 即表示同意并遵守风流
                    <br>
                    用户协议 和 隐私政策 。</p>
                <div class="style8" id="show7" style="position: absolute;top: 85%; font-family: 楷体,serif;">直接注册</div>
            </div>
            <i class="pic1" style=" position:absolute; top:89%; left: 20%; " id="iconfont1">&#xe65e;</i>
            <i class="pic2" style=" position:absolute; top:89%; left: 45% " id="iconfont2">&#xe620;</i>
            <i class="pic3" style=" position:absolute; top:89%; left: 70% " id="iconfont3">&#xe666;</i>
        </form>
    </div>
</div>
</body>
</html>
